<template>
    <div class="payment-management">
        <div class="text-left mb-2">回款计划 </div>
        <a-form :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16 }" >
        <a-row >
            <a-col :span="12">
                <a-form-item label="计划制定人" name="planDesignee" :rules="[{ required: true }]">
                    <a-input disabled v-model:value="planData.planDesignee" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="计划生成日期" name="planGenerationDate" :rules="[{ required: true }]">
                    <a-input disabled v-model:value="planData.planGenerationDate" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row class=" mb-2">
            <a-col :span="12">
                <a-form-item label="计划修改人" name="planModifier" :rules="[{ required: true }]">
                    <a-input disabled v-model:value="planData.planModifier" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="计划修改日期" name="planUpdateDate" :rules="[{ required: true }]">
                    <a-input disabled v-model:value="planData.planUpdateDate" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        </a-form>
        <a-table :columns="planColumns" :data-source="planDataSource"></a-table>
        <div class="text-left mb-2">回款记录 (累计回款：3700000.00元） </div>
        <a-table :columns="columns" :data-source="dataSource"></a-table>
    </div>
</template>
  
<script setup>
const planColumns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: "计划回款日期",
        dataIndex: "plannedDate",
        key: "plannedDate"
    },
    {
        title: '计划回款累计金额（元）',
        dataIndex: 'plannedAmount',
        key: 'plannedAmount'
    },
    {
        title: "计划状态",
        dataIndex: "planStatus",
        key: "planStatus"
    }
]

const planDataSource = [
    {
        "id": 1,
        "plannedDate": "2022-01-01",
        "plannedAmount": 10000,
        "planStatus": "未完成"
    }, {
        "id": 2,
        "plannedDate": "2022-02-05",
        "plannedAmount": 20000,
        "planStatus": "已完成"
    }, {
        "id": 3,
        "plannedDate": "2022-03-10",
        "Plannnedamounts": 3000, "planStatus": "已完成"
    }]

const planData = ref({})

const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '回款时间',
        dataIndex: "paymentTime",
        key: 'paymentTime'
    },
    {
        title: '回款金额（元）',
        dataIndex: 'paymentAmount',
        key: 'paymentAmount'
    },
    {
        title: "回款类型",
        dataIndex: "paymentType",
        key: "paymentType"
    },
    {
        title: "回款方式",
        dataIndex: "paymentMethod",
        key: "paymentMethod"
    },
    {
        title: '登记人',
        dataIndex: 'registerPerson',
        key: 'registerPerson'
    }
];
const dataSource = [
    {
        "id": 1,
        "paymentTime": "2022-01-01",
        "paymentAmount": 10000,
        "paymentType": "线上支付",
        "paymentMethod": "微信支付",
        "registerPerson": '张三'
    },
    {
        "id": 2,
        'paymentTime': '2022-03-05',
        'paymentAmount': 20000,
        'paymentType': '现金',
        'paymentMethod': '银行转账',
        'registerPerson': '李四'
    },
    {
        'id': 3,
        'paymentTime': '2022-05-10',
        'paymentAmount': 5000,
        'paymentType': "支票",
        'PaymentMethod': "邮寄",
        'registerPerson': "王五"
    }
]

const props = defineProps({
    id: {
        type: String,
    }
})
const { id } = toRefs(props)
watch(id, () => {
    refresh(id.value);
});
const refresh = (id) => {
    console.log("negotiateChanges fatch Id", id)
}
</script>
